<template>
    <div :class="['weatherCard', c == '晴' ? 'q' : 'r']">
        <div>{{ city }}</div>
        <div :style="{ fontSize: 120 / 4 + 'px' }">{{ w }}℃</div>
        <div>{{ c }}{{ wind }}</div>
        <div>空气{{ air }}</div>
        <img :src="icon" alt="" style="position: absolute; top: 10px; right: 12px; width: auto; height: 33px;">
    </div>
</template>

<script setup>
import otherApi from "@/api/other.js"
import { ref } from "vue"
import bigCard from "../bigCard.vue"
let city = ref(""), w = ref(0), c = ref(''), wind = ref(''), air = ref(''), icon = ref('')
otherApi.getWealth().then(res => {
    let data = res.data.data
    city.value = data.city_name
    w.value = data.current_temperature
    c.value = data.current_condition
    wind.value = `(${data.wind_direction} ${data.wind_level}级)`
    air.value = data.quality_level + " " + data.aqi
    icon.value = `https://h5tq.moji.com/tianqi/assets/images/weather/w${data.weather_icon_id}.png`
})
</script>

<style scoped>
.weatherCard {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: calc(100% - 28px);
    justify-content: space-between;
    overflow: hidden;
    padding: 14px;
    position: relative;
    width: calc(100% - 28px);
    color: rgb(255, 255, 255);
    border-radius: 15px;
}

.q {
    background: -webkit-linear-gradient(top, rgb(13, 104, 188), rgb(114, 173, 224));
}

.r {
    background: -webkit-linear-gradient(top, rgb(72, 86, 99), rgb(161, 184, 202));
}
</style>